<template>
  <div ref="vantaRef" style="width: 100%; height: 100%;"></div>
</template>

<script>
import * as THREE from 'three';
import NET from 'vanta/dist/vanta.net.min';

export default {
  data() {
    return {
      vantaEffect: null
    }
  },
  mounted() {
    this.vantaEffect = NET({
      el: this.$refs.vantaRef,
      THREE: THREE,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00,
      color: 0x653e49,
      backgroundColor: 0x72dec9,
      points: 1.00,
      maxDistance: 10.00,
      spacing: 10.00,
      showDots: false
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) this.vantaEffect.destroy();
  }
};
</script>

  
  